<!--
功能：换寝申请,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/5 12:32,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div>
    <div class="kong" v-if="dis">
      <i class="el-icon-loading"></i>暂无申请...
    </div>
    <div class="user"
         v-for="u in userData"
         :key="u.id">
      <div class="u1">
        <div class="img">
          <el-image :src="imgUrl" fit="fill" class="image"></el-image>
        </div>
        <div class="text">
          <span>姓名：{{ u.user.name }}</span>
          <span>学号：{{ u.user.account }}</span>
          <span>电话：{{ u.user.phone }}</span>
          <span>专业：{{ u.user.professional }}</span>
          <span>班级：{{ u.user.grade }}</span>
          <span>床位：{{ u.user.beds.name }}</span>
          <span>房间：{{ u.user.room.name }}</span>
          <span>楼层：{{ u.user.floor.name }}</span>
        </div>
      </div>
      <div class="u2">
        <span>状态: {{ u.statue }}</span>
        <span>备注: {{ u.note }}</span>
        <span>
          <el-button type="primary" @click="receive(u)">接收申请</el-button>
          <el-button type="danger" @click="cancel(u)">取消申请</el-button>
        </span>
      </div>
      <div class="u3">
        <div class="text rig">
          <span>{{ u.user1.name }} ：姓名</span>
          <span>{{ u.user1.account }} ：学号</span>
          <span>{{ u.user1.phone }} ：电话</span>
          <span>{{ u.user1.professional }} ：专业</span>
          <span>{{ u.user1.grade }} ：班级</span>
          <span>{{ u.user1.beds.name }} ：床位</span>
          <span>{{ u.user1.room.name }} ：房间</span>
          <span>{{ u.user1.floor.name }} ：楼层</span>
        </div>
        <div class="img">
          <el-image :src="imgUrl" fit="fill" class="image"></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {message, confirm} from "@/utils/age";
import {mapState} from "vuex";
export default {
  name: "Bedroom",
  data() {
    return {
      dis: false,
      userData: [],
      imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    };
  },
  components: {},
  computed: {
    ...mapState(["floor"])
  },
  mounted() {
    this.findAssess()
  },
  methods: {
    cancel(u) {
      //  取消申请
      this.$prompt('请输入取消理由，不可为空，不可超过8个字符', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        if ((value.trim() == "") || (value.length > 8)) {
          message("error", "内容不可为空，不可超出8个字符！")
        } else {
          u.note = value
          this.$http.post('root/cancel', u).then(response => {
            message("success", "成功")
          }).catch(err => {
            message("error", "请求参数错误")
          }).finally(() => {
            this.findAssess()
          })
        }
      }).catch(() => {

      });
    },
    receive(u) {
      //  接收
      this.$confirm('此操作将同意该学员的申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('root/setAssess', u).then(response => {
          message("success", "成功")
          //  将保存于vuex之中的数据刷新
          this.$store.commit("setUsr", {})
        }).catch(err => {
          message("error", "请求参数错误")
        }).finally(() => {
          this.findAssess()
        })
      }).catch(() => {

      });
    },
    //  查询所有的学员的申请记录
    findAssess() {
      this.$http.post('root/allAssess',this.floor).then(response => {
        message("success", "成功")
        this.userData = response.data
        if (this.userData.length == 0) {
          this.dis = true
        } else {
          this.dis = false
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>
.kong {
  width: 100%;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #909399;
}

.kong i {
  margin-right: 10px;
}

.user {
  box-sizing: border-box;
  padding: 0 15px;
  width: 100%;
  height: 250px;
  margin: 15px 0;
  display: flex;
  background-color: #F3F3F3;
  cursor: pointer;
  border-radius: 6px;
  transition: all .3s;
}

.user:hover {
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}

.u1,
.u3 {
  flex: 2;
  display: flex;
}

.img {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.text {
  box-sizing: border-box;
  padding: 0px 35px;
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text span {
  letter-spacing: 3px;
  margin: 2px 0;
  font-size: 18px;
  color: #909399;
}

.rig {
  align-items: flex-end;
}

.u2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.u2 span {
  font-size: 20px;
  color: #909399;
  font-weight: 700;
  margin: 10px 0;
}

.u2 span button {
  font-weight: 700;
}
</style>
